<template>
  <div class="box mailhistory">
    <div class="querybox">
      <!-- <el-input
        v-model="filters.searchBy"
        placeholder="请输入查询内容"
        style="width: 200px; right: 10px;"
        @keyup.enter.native="mail_records(1)"
      />
      <el-button
        type="primary"
        @click="mail_records(1)"
      >查询</el-button> -->
      <!-- <el-button
        type="primary"
        @click="add"
      >新增</el-button> -->
    </div>
    <el-table
      :data="tableData"
      border
    >
      <el-table-column
        prop="mailAddress"
        label="收件人"
      />
      <el-table-column label="用户ID">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="linkToUser(scope.row.staffId)"
          >{{ scope.row.staffId }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="附件链接"
      >
        <template slot-scope="scope">
          <a :href="scope.row.staticURL" target="_blank" style="text-decoration: underline;">附件链接</a>
        </template>
      </el-table-column>
      <el-table-column
        label="发送内容"
      >
        <template slot-scope="scope">
          <el-tooltip placement="top" effect="light">
            <div slot="content"><div v-html="scope.row.mailContent" /></div>
            <a>内容详情...</a>
          </el-tooltip>
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="状态"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-text="启用"
            inactive-text="禁用"
            @change="statusChange(scope.row)"
          />
        </template>
      </el-table-column> -->
      <el-table-column label="发送时间" width="100">
        <template slot-scope="scope">
          <div>{{ timeTranslateHMS(scope.row.created, true) }}</div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" width="200">
        <template slot-scope="scope"> -->
      <!-- <el-button
            type="text"
            size="small"
            @click="viewUser(scope.row.id, scope.index)"
          >查看</el-button> -->
      <!-- <el-button type="text" size="small" @click="updUser(scope.row, scope.index)">修改</el-button> -->
      <!-- <el-button type="text" size="small" @click="grant_parent(scope.row.id)">推送</el-button>
          <el-button type="text" size="small" @click="pay_record(scope.row.id)">支付</el-button>
          <el-button type="text" size="small" @click="preview_url(scope.row.id)">预览</el-button>
          <el-button type="text" size="small" @click="pb_reportsExport(scope.row.id)">导出</el-button> -->
      <!-- <Del-tip
            type="text"
            size="small"
          >
            <el-button type="primary" size="mini" @click="delUser(scope.row.id)">确定</el-button>
          </Del-tip> -->
      <!-- </template>
      </el-table-column> -->
    </el-table>
    <el-row style="margin-top: 10px;">
      <el-pagination
        :total="total"
        :current-page="filters.pageNum"
        :page-size="filters.pageSize"
        layout="total, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleSizeChange"
      />
    </el-row>

    <el-dialog
      :title="editType === 'add' ? '新增' : '查看'"
      :visible.sync="dialogFormVisible"
      :before-close="beforeClose"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        :inline="true"
      >
        <el-form-item
          label="昵称"
          prop="nickName"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.nickName"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="姓名"
          prop="name"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.name"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="性别"
          prop="gender"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.gender"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="月龄"
          prop="month"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.month"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="身高(cm)"
          prop="height"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.height"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="体重(kg)"
          prop="weight"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.weight"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="出生日期"
          prop="birthday"
          :label-width="formLabelWidth"
        >
          <el-date-picker
            v-model="form.birthday"
            type="date"
            placeholder="选择日期"
            style="width: 185px;"
          />
        </el-form-item>
        <el-form-item
          label="头像"
          prop="imgUrl"
          :label-width="formLabelWidth"
        >
          <Upload
            v-model="form.imgUrl"
            style="width: 185px;"
            :img-url="form.imgUrl"
            @on-success="onSuccess"
          />
        </el-form-item>
        <el-form-item
          label="创建时间"
          prop="created"
          :label-width="formLabelWidth"
        >
          <el-date-picker
            v-model="form.created"
            type="date"
            placeholder="选择时间"
            disabled
            style="width: 185px;"
          />
        </el-form-item>
      </el-form>
      <!-- <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="姓名" prop="username" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="电话" prop="mobile" :label-width="formLabelWidth">
          <el-input v-model="form.mobile" autocomplete="off" />
        </el-form-item>
      </el-form> -->
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="resetForm('form')">取 消</el-button>
        <el-button
          type="primary"
          @click="closeDialogForm('form')"
        >确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="预览信息" :visible.sync="preview_urlDialogVisible">
      <div class="previewBox">
        <div style="display: inline-block; text-align: left;">
          <div><span class="labelStyle">姓名：</span><span>{{ preview_urlData.childrenName }}</span></div>
          <div><span class="labelStyle">月龄：</span><span>{{ preview_urlData.month }}</span></div>
          <div><span class="labelStyle">二维码：</span><span>
            <Upload
              v-model="preview_urlData.qrcode"
              :img-url="preview_urlData.qrcode"
              style="display: inline-block;"
            />
          </span></div>
        </div>
        <!-- <div><span class="labelStyle">链接：</span><span><a :href="preview_urlData.url">{{preview_urlData.url}}</a></span></div> -->

        <div style="margin-top: -100px;">
          <div class="antd-pro-pages-evalute-style-ihone">
            <iframe :src="preview_urlData.url" frameborder="0" class="antd-pro-pages-evalute-style-ihoneFram" />
            <div class="antd-pro-pages-evalute-style-ihoneBg" />
          </div>
        </div>

      </div>
    </el-dialog>

  </div>
</template>

<script>
import { mail_records, childrenDetail, update_child_info, childrenDelete, grant_parent, pay_record, pb_reportsExport, preview_url } from '@/api/emailhistory'
import { bizorg_trans } from '@/api/org'
import { productList } from '@/api/product'
import { timeTranslateHMS } from '@/utils/formatdate'
import Upload from '@/components/Upload'
export default {
  name: 'Documentation',
  components: {
    Upload
  },
  data() {
    return {
      preview_urlDialogVisible: false,
      preview_urlData: {},
      options: [],
      timeTranslateHMS,
      filters: {
        mobile: '',
        username: '',
        searchBy: '',
        pageNum: 1,
        pageSize: 10
      },
      form: {
        nickName: '',
        name: '',
        month: '',
        height: '',
        weight: '',
        birthday: '',
        imgUrl: ''
      },
      total: 0,
      rules: {
        nickName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        month: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        height: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        weight: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        birthday: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        imgUrl: [
          { required: false, message: '不能为空', trigger: 'blur' }
        ]
      },
      tableData: [],
      formLabelWidth: '120px',
      dialogFormVisible: false,
      query: '',
      editType: null
    }
  },
  mounted() {
    this.mail_records()
    // this.productList()
  },
  methods: {
    bizOrgChange(orgId) {
      orgId = '4028808a748b6e4f01748b71b6bf0002'
      bizorg_trans({ orgId }).then((res) => {
      })
    },
    // dialog关闭事件
    beforeClose() {
      this.resetForm('form')
    },
    // logo上传成功监听
    onSuccess(res) {
      this.form.imgUrl = res
    },
    // 生成随机数
    randomStr() {
      const str = '1234567890abcdefghijkmnpqrstuvwxyz'.split('')
      let result = ''
      for (let i = 0; i < 8; i++) {
        result += str[Math.floor((Math.random() * (str.length - 1)) + 1)]
      }
      return result
    },
    // 新增操作
    add() {
      this.form.code = this.randomStr()
      this.editType = 'add'
      this.dialogFormVisible = true
    },
    // 分页切换监听
    handleSizeChange(pageNum) {
      this.filters.pageNum = pageNum
      this.mail_records()
    },
    // 用户列表
    mail_records(num) {
      // const pageNum = this.filters.pageNum - 1
      if (num === 1) this.filters.pageNum = 1 // 查询时，分页器数字重置为1
      const pageNum = (num || this.filters.pageNum) - 1
      mail_records({ ...this.filters, pageNum }).then(res => {
        const result = res.data
        this.tableData = result.content
        this.total = result.totalElements
      }).catch(err => {
        console.log(err)
      })
    },
    // 删除用户
    delUser(id) {
      this.editType = 'delete'
      // this.tableData.splice(row, 1)
      // this.$message({
      //   message: '删除成功！',
      //   type: 'success'
      // })
      childrenDelete({ evaluateRecordId: id }).then((res) => {
        this.$message({
          message: '删除成功！',
          type: 'success'
        })
        this.mail_records()
      })
    },
    // 推送
    grant_parent(evaluateRecordId) {
      grant_parent({ evaluateRecordId }).then(res => {
        // this.form = res.data
        // let result = res.data;
        // this.tableData = result.users;
        this.$message({
          message: '推送成功！',
          type: 'success'
        })
      }).catch(err => {
        console.log(err)
      })
    },
    // 支付测评
    pay_record(evaluateRecordId) {
      pay_record({ evaluateRecordId }).then(res => {
        // this.form = res.data
        // let result = res.data;
        // this.tableData = result.users;
        this.$message({
          message: '调用成功！',
          type: 'success'
        })
      }).catch(err => {
        console.log(err)
      })
    },
    pb_reportsExport(evaluateRecordId) {
      pb_reportsExport({ evaluateRecordId }).then(res => {
        // this.form = res.data
        // let result = res.data;
        // this.tableData = result.users;
        this.download(res.data)
        this.$message({
          message: '导出成功！',
          type: 'success'
        })
      }).catch(err => {
        console.log(err)
      })
    },
    preview_url(evaluateRecordId) {
      preview_url({ evaluateRecordId }).then(res => {
        // this.form = res.data
        // let result = res.data;
        // this.tableData = result.users;
        this.preview_urlDialogVisible = true
        this.preview_urlData = res.data
        // this.$message({
        //   message: '导出成功！',
        //   type: 'success'
        // })
      }).catch(err => {
        console.log(err)
      })
    },
    download(url, row) {
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      // 获取文件名
      // download 属性定义了下载链接的地址而不是跳转路径
      link.setAttribute('download', '文件')
      document.body.appendChild(link)
      link.click()
    },
    // 修改用户
    updUser(row, index) {
      this.editType = 'update'
      this.dialogFormVisible = true
    },
    // 查看用户
    viewUser(id) {
      this.editType = 'view'
      this.dialogFormVisible = true
      this.childrenDetail(id)
    },
    // 用户详情
    childrenDetail(childrenId) {
      childrenDetail({ childrenId }).then(res => {
        // res.data.org.logo = 'https://dss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/bd315c6034a85edf3d432b7d44540923dc5475a5.jpg'
        this.form = res.data
        // let result = res.data;
        // this.tableData = result.users;
      }).catch(err => {
        console.log(err)
      })
    },
    // 弹窗关闭触发函数
    closeDialogForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.update_child_info(formName)
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    // 新增用户
    update_child_info(formName) {
      const obj = { ...this.form }
      obj.created = timeTranslateHMS(obj.created, null, '/')
      obj.birthday = timeTranslateHMS(obj.birthday, null, '/')
      update_child_info(obj).then((res) => {
        this.$message({
          message: '修改成功！',
          type: 'success'
        })
        this.mail_records()
        this.resetForm(formName)
        // this.dialogFormVisible = false
      })
    },
    statusChange(row) {
      // {id: row.id, status: row.status}
    },
    // 产品列表
    productList() {
      // const pageNum = this.filters.pageNum - 1
      // { ...this.filters, pageNum }
      productList().then(res => {
        const result = res.data.content
        const arr = []
        for (let i = 0; i < result.length; i++) {
          if (result[i].name) {
            arr.push(result[i])
          }
        }
        this.options = arr
        // this.tableData = result.content
        // this.total = result.totalPages
      }).catch(err => {
        console.log(err)
      })
    },
    linkToUser(id) {
      this.$router.push({ name: 'User', params: { id }})
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  margin: 20px 30px;
  .form {
    margin-top: 50px;
  }
  .querybox {
    text-align: right;
    margin-bottom: 20px;
  }
}
.box-card {
  margin-bottom: 15px;
}
.labelStyle {
  display: inline-block;
  min-width: 80px;
  font-weight: 700;
}
.previewBox {
  text-align: center;
  div {
    margin-bottom: 15px;
    span {
      vertical-align: middle;
      a {
        text-decoration: underline;
      }
    }
  }
}
.antd-pro-pages-evalute-style-ihone {
      width: 375px;
      height: 720px;
      margin: 0 auto;
      overflow: hidden;
      position: relative;
      transform:  scale(0.75);
}
.antd-pro-pages-evalute-style-ihone .antd-pro-pages-evalute-style-ihoneBg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('http://pc.starinside.cn/static/iphone8.178c51fb.png') 50% no-repeat;
      background-size: 100% 100%;
      z-index: 9;
}
.antd-pro-pages-evalute-style-ihone .antd-pro-pages-evalute-style-ihoneFram {
      width: 95%;
      top: 50px;
      position: absolute;
      z-index: 11;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      height: 560px;
}
.mailContent {
  width: 100px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
  h1 {
    font-size: 18px;
  }
}

</style>
